<template>
  <div class="bg-light">
      <div class="container-title">基础设置</div>
      <Form :label-width="100" :rules="rule" ref="form" :model="form">
        <Row class="pr">
          <Col span="9">
            <FormItem label="促销名称" prop="name">
              <Input placeholder="请输入促销名称" v-model="form.name" :maxlength="15"/>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="13">
            <FormItem
              v-for="(item, index) in form.date"
              :key="index"
              v-if="item.status"
              label="活动时间"
              :options="'options'+index+'value'"
              :prop="'date.' +index+ '.value'"
              :rules="{
                        required: true,
                        type: 'array',
                        message: '请输入起止日期',

                        fields: {
                          0: {validator: validate0},
                          1: {validator: validate1}
                        },
                        trigger: 'change'}">
                        <Row>
                          <Col span="15">
                            <fomatDate
                              :DateValue="item.value"
                              v-model="item.value">
                            </fomatDate>
                            <!-- <DatePicker
                              type="datetimerange"
                              v-model="item.value"
                              placeholder="请选择使用期限">
                            </DatePicker> -->
                          </Col>
                          <Col span="8" v-show="index < 1">
                            <Button class="button-left" type="primary" @click="onAddDate(index)"   icon="md-add" size="small"></Button>
                              <!-- <span class="span-button" >[<span class="color-red" >+</span>]</span> -->
                          </Col>
                          <Col span="8" v-show="index > 0">
                            <Button class="button-left" type="primary" @click="onReduceDate(index)"   icon="md-remove" size="small"></Button>
                              <!-- <span class="span-button" >[<span class="color-red" >-</span>]</span> -->
                          </Col>
                      </Row>
                </FormItem>
              </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                    <FormItem label="活动对象" prop="grade">
                      <CheckboxGroup v-model="form.grade">
                           <Checkbox :label="item.value" v-for="item in storeTypeData" :key="item.id">{{item.text}}</Checkbox>
                      </CheckboxGroup>
                    </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                  <FormItem label="参与方式" prop="">
                    <CheckboxGroup v-model="checked">
                        <Checkbox disabled :label="item.id" v-for="item in gradeList" :key="item.id">{{item.name}}</Checkbox>
                    </CheckboxGroup>
                  </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                    <FormItem label="单次最少购买数量" prop="least"  :label-width="150">
                        <Input v-model="form.least" style="width:40px" placeholder="" :maxlength="2"/>
                    </FormItem>
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                <FormItem label="活动备注" >
                    <Input v-model="form.remarks" type="textarea"  placeholder="请输入活动备注" :maxlength="128"/>
                </FormItem>
                </Col>
            </Row>
          </Col>
        </Row>
      </Form>
    </div>
</template>
<script>
import fomatDate from '@/components/ChoseDateFormat'
export default {
  components: {
    fomatDate
  },
  props: {
    form: {
      type: Object
    }
  },
  data() {
    let validateleast = function(rule, value, callback) {
      if (!value) {
        return callback("请输入单次购买数量")
      }else if(!(/^([1-9]|10)$/.test(value))){
        return callback("单次购买数量必须是在1-10之间")
      }else{
        callback()
      }
    }
    return {
      checked: [1],
      gradeList: [{
        id: 1,
        name: '部分商品参加'
      }],
      grade: '1',
      options0value: {
         disabledDate (date) {
           return date && date.valueOf() < Date.now() - 86400000;
         }
      },
      termList: [{
        id: 1,
        name: '限IP/UDID'
      }, {
        id: 2,
        name: '限帐号'
      }],
      rule: {
        'name': [{ required: true, message: '请输入促销名称', trigger: 'blur' }],
        'date': [{ required: true,
                    message: '请开始时间',
                    trigger: 'change',
                    type: 'array',
                    // fields: {
                    //   0: {type: 'date', required: true, message: '请输入起止日期'},
                    //   1: {type: 'date', required: true, message: '请输入起止日期'}
                    // }
                }],
        'grade': [{ required: true, type: 'array', message: '请选择活动对象', trigger: 'change' }],
        'term': [{ required: true, message: '请选择限购条件', trigger: 'blur' }],
        'num': [{ required: true, message: '请选择限购数量', trigger: 'blur' }],
        'least': [{ validator: validateleast, trigger: 'blur' }]
      }
    }
  },
  methods: {
    validate0 (rule, value, callback) {
      if(!value){
          return callback(new Error("请输入起止时间"))
      }else{
        callback()
      }

    },
    validate1 (rule, value, callback) {
      if(!value) {
        return callback(new Error("请输入起止时间2"))
      }else if(rule.fullField == "date.1.value.1"){
          if(this.$store.state.giftSale.Giftsaleform.date[1].value[0]<this.$store.state.giftSale.Giftsaleform.date[0].value[1]) {
            return callback(new Error("二阶的起始时间必须大于一阶时间的结束时间"))
          }else {
             callback()
          }
      }else if (rule.fullField == "date.2.value.1"){
          if(this.$store.state.giftSale.Giftsaleform.date[2].value[0]<this.$store.state.giftSale.Giftsaleform.date[1].value[1]) {
            return callback(new Error("三阶的起始时间必须大于二阶时间的结束时间"))
          }else {
             callback()
          }
      }else{
        callback()
      }
    },
    onAddDate (index) {
       this.$store.commit('onAddDate',index)
    },
    onReduceDate (index) {
      this.$store.commit('onReduceDate',index)
    },
    RadioType () {

    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  computed: {
    storeTypeData () {
      return this.$store.getters.storeTypeData
    }
  }
}
</script>
